/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<view class="nav">
			<navigator @tap="changeTab" class="nav-item" :class="[order_by==desc?'nav-select':'']" :data-id="desc" role="navigation">默认</navigator>
			<navigator @tap="changeTab" class="nav-item" :class="[order_by==sales_sum?'nav-select':'']" :data-id="sales_sum" role="navigation">
				兑换量
				<view class="ico-dg">
					<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
				</view>
			</navigator>
			<navigator @tap="changeTab" class="nav-item" :class="[order_by==exchange_integral?'nav-select':'']" :data-id="exchange_integral" role="navigation">
				积分值
				<view class="ico-dg">
					<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
				</view>
			</navigator>
		</view>
		<view class="choice_list">
			<block v-for="(item,index) in goodsList">
				<navigator class="choice_item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id"  role="navigation">
					<view class="img-wrap">
						<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType" role="img"></image>
					</view>
					<view class="item-cont">
						<view class="title">{{item.goods_name}}</view>
						<view class="price">
							<view class="discount-price"> ￥{{item.shop_price.toFixed(2)}}</view>
							+{{item.exchange_integral}}积分
						</view>
						<view class="market-price">市场价 ￥ {{item.market_price.toFixed(2)}}</view>
					</view>
					<button class="exchange-btn" role="button" aria-disabled="false">
						立即兑换

					</button>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
	import {getGoodsIntegral} from "@/api/api.js";
	import config from "@/api/config.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				hostUrl:config.host,//图片路径前缀
				imgUrl:config.imgUrl,
				goodsList:[],//商品list
				p:1,//初始数据20条
				total:"",//总数据
				order_by:"",//kong
				desc:"",//默认
				sales_sum:"sales_sum",//兑换量
				exchange_integral:"exchange_integral",//积分值
			};
		},
		onLoad(){
			// is_exchange_integral=true&p=${p}&order_by=${order}&sort=desc
			let params={
				p:this.p,
				order_by:this.order_by,
			}
			this._getGoodsIntegral(params)
		},
		computed: {
			...mapState(['imgType','goodsImgHeight','goodsImgWidth'])
		},
		methods:{
			_getGoodsIntegral(params){//获取积分商品
				getGoodsIntegral(params).then(res=>{
					console.log(res)
					this.goodsList=this.goodsList.concat(res.records);
					this.total=res.total;
				})
			},
			changeTab(e){//切换
				console.log(e)
				this.goodsList.length=0;
				this.order_by=e.currentTarget.dataset.id
				this.p=1;
				let params={
					p:this.p,
					order_by:this.order_by
				}
				this._getGoodsIntegral(params)
			},
			onReachBottom(){//下拉加载数据
			
				if(this.goodsList.length===this.total){
					uni.showToast({
						icon:"none",
					    title: '加载完了',
					    duration: 2000
					});
					return false;
				}
				this.p++;
				let params={
					p:this.p,
					order_by:this.order_by
				}
				this._getGoodsIntegral(params)
				// this._getGoods(this.cat_id,this.size);
				
			},
		}
	}
</script>

<style lang="scss">
	.container {
		color: #666;
	}

	.nav-item {
		float: left;
		width: 33.33%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		background-color: #fff;
	}

	.nav-item .ico-dg {
		width: 26rpx;
		height: 14rpx;
		margin-left: 10rpx;
		line-height: 0;
	}
	.nav-select{
		color: #ff3b3b;
	}
	.choice_list {
		background-color: #f5f5f5;
	}

	.choice_item {
		position: relative;
		min-height: 200rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
		border-radius: 10rpx;
		width: 710rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		box-sizing: border-box;
		background: #ffffff;
	}

	.img-wrap {
		float: left;
		width: 180rpx;
		height: 180rpx;
		padding: 0 10rpx 10rpx;
	}

	.img-wrap image {
		width: 100%;
		height: 100%;
	}

	.item-cont .title {
		height: 72rpx;
		margin: 16rpx 0;
		padding-right: 10rpx;
		line-height: 36rpx;
		color: #333;
		overflow: hidden;
	}

	.discount-price {
		display: inline-block;
		color: #ff3b3b;
	}

	.exchange-btn {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 150rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: #666;
	}

	.price {
		padding-bottom: 20rpx;
	}
</style>
